<style>

    .ly-text-count {
        margin-bottom: 10px;
        color: #9DA9B6;
        font-size: 14px;
        line-height: 30px;
        display: block;
        clear: both;
        float: left;
    }

    .ly-text-count-long {
        color: #FE707D;
    }
</style>
<template>
    <div class="ly-text-count" >
        <span :class="{'ly-text-count-long':value_length>max}">{{value_length}}</span>/{{max}}
    </div>
</template>
<script>
    Rap.define('', '', function () {
        return {
            name: 'ly-text-count',
            props: {
                value: {
                    'defalut': ''
                },
                max: {
                    'defalut': 100
                }
            },
            computed: {
                value_length: function () {
                    if (this.value && typeof(this.value) == 'string') {
                        return this.value.length;
                    }
                    return 0;
                }
            },
            created: function () {
            }, destroyed: function () {

            }, methods: {}
        }
    });
</script>


